<template>
    <div>
        <!-- 表头 -->
        <div class="Head" v-if="Head">
            <!-- 仓库名称 -->
            <div class="Cusname">
                <span style="margin-right: 10px">仓库名称</span>
                <span>
                    <el-input v-model="adi.belongName" placeholder="请输入名称"></el-input>
                </span>
            </div>
            <!-- 货架名称 -->
            <div class="Cusname">
                <span style="margin-right: 10px">货架名称</span>
                <span>
                    <el-input v-model="adi.name" placeholder="请输入名称"></el-input>
                </span>
            </div>
            <!-- 客户类别 -->
            <div class="Cusgory">
                <span style="margin-right: 10px">状态</span>
                <el-select v-model="adi.occupy" placeholder="用户状态" style="margin-top: 10px">
                    <el-option v-for="item in options" :key="item.occupy" :label="item.value" :value="item.occupy"></el-option>
                </el-select>
            </div>
            <!-- 搜索，重置按钮 -->
            <div class="But">
                <el-button type="primary" icon="el-icon-search" @click="serch">搜索</el-button>
                <el-button icon="el-icon-refresh">重置</el-button>
            </div>
        </div>
        <!-- 表 -->
        <div class="function" style="margin-top: 10px">
            <el-button type="primary" icon="el-icon-plus" plain @click="addLists">新增</el-button>
            <el-button type="warning" icon="el-icon-download" plain>导出</el-button>
            <div style="float: right">
                <el-tooltip class="item" effect="dark" content="隐藏搜索" placement="top">
                    <el-button icon="el-icon-search" circle @click="Display"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                    <el-button icon="el-icon-refresh" circle></el-button>
                </el-tooltip>
            </div>
        </div>
        <el-table :data="tableData" class="content" :cell-style="rowClass" :header-cell-style="headClass">
                <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
            <el-table-column prop="belongName" label="仓库名称"></el-table-column>
            <el-table-column prop="name" label="货架名称"></el-table-column>
            <el-table-column prop="code" label="货架条码"></el-table-column>
            <el-table-column prop="volume" label="容量上限(立方米)"></el-table-column>
            <el-table-column prop="weight" label="重量上限(KG)"></el-table-column>
            <el-table-column prop="occupy" label="占用标志">
                <template slot-scope="scope">
                    {{ scope.row.occupy == 0 ? '停用' : '启用' }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row)">修改</el-button>
                    <el-button type="text" size="small" @click="Deldeli(scope.row.sId)">删除</el-button>
                    <el-button type="text" size="small" @click="seec(scope.row.id)">查看</el-button>
                    <el-button type="text" size="small" @click="print(scope.row)">打印条形码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 添加仓库弹框 -->
        <el-dialog title="添加仓库" :visible.sync="dialogVisible" width="55%" :before-close="handleClose" class="adframe">
            <el-form ref="form" :model="adi" prop="wId">
                <span style="display: block; margin-top: -20px"
                    >仓库<el-select v-model="adi.wId" placeholder="用户状态" style="margin-top: 10px">
                        <el-option v-for="item in ck" :key="item.wId" :label="item.name" :value="item.wId"></el-option> </el-select
                ></span>
                <span>货架名称<el-input placeholder="请输入货架名称" v-model="adi.name"></el-input></span>
                <span>货架条码<el-input placeholder="请输入货架条码" v-model="adi.code"></el-input></span>
                <span>容量上限(立方米)<el-input placeholder="请输入容量上限(立方米)" v-model="adi.volume"></el-input></span>
                <span>重量上限(KG)<el-input placeholder="请输入重量上限(KG)" v-model="adi.weight"></el-input></span>
                <span
                    >占用标志
                    <el-select v-model="adi.occupy" prop="occupy" placeholder="用户状态" style="margin-top: 10px">
                        <el-option
                            v-for="item in options"
                            :key="item.occupy"
                            :label="item.value"
                            :value="item.occupy"
                        ></el-option> </el-select
                ></span>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dw">取 消</el-button>
                <el-button type="primary" @click="conVarSum">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 查看 -->
        <el-dialog title="提示" :visible.sync="see" width="55%" :before-close="handleClose">
            <el-table :data="sees" class="content" :cell-style="rowClass" :header-cell-style="headClass">
                    <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
                <el-table-column prop="name" label="货品名称"></el-table-column>
                <el-table-column prop="sku" label="sku"></el-table-column>
                <el-table-column prop="stock" label="库存数量"></el-table-column>
                <el-table-column prop="stock" label="可用库存"></el-table-column>
                <el-table-column prop="stock" label="商品描述"></el-table-column>
            </el-table>
            <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pages.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pages.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totals"
            >
            </el-pagination>
        </div>
         <span slot="footer" class="dialog-footer">
                  <el-button @click="see = false">取 消</el-button>
                <el-button type="primary" @click="see = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 打印 -->
        <el-dialog title="打印预览" :visible.sync="Print" width="35%" :before-close="handleClose" class="adframe">
            <el-form ref="form" :model="sl">
                <div id="printMe">
                    <svg id="barcode"></svg>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="Print = false">取 消</el-button>
                <el-button v-print="'#printMe'" type="primary">打印</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { listgoodsshelves, del, Cadd, Cupt, listWarehouse,listmain } from '../../api/user.js';
import JsBarcode from 'jsbarcode';

export default {
    data() {
        return {
            value: '',
            dialogVisible: false,
            see: false,
            // 表头隐藏
            Head: true,
            tableData: [],
            sees:[],
            Print: false,
            // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
             pages: {
                pageSize: 10,
                pageNum: 1
            },
            sl: {
                realStock: null
            },
            // 客户类别
            options: [
                {
                    occupy: 0,
                    value: '停用'
                },
                {
                    occupy: 1,
                    value: '启用'
                }
            ],
            ck: [],
            adi: {
                belongName: null,
                name: null,
                code: null,
                volume: null,
                weight: null,
                occupy: null,
                wId: null
            },
            total: null,
            totals:null
        };
    },
    methods: {
        // 表头显示
        Display() {
            this.Head = !this.Head;
        },
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D;';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.Rean();
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.Rean();
        },
        // 渲染
        Rean() {
            listgoodsshelves(this.page).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
                console.log(res);
            });
        },
        rean() {
            listWarehouse(this.wId).then((res) => {
                this.ck = res.rows;
                console.log(res.rows);
            });
        },
        seec(){
            listmain(this.pages).then((res)=>{
                this.sees=res.rows;
                this.totals=res.total
                this.see=true;
                console.log(res);
            })
        },
        // 搜索
        serch() {
            listgoodsshelves(this.adi).then((res) => {
                console.log(res);
                this.tableData = res.rows;
            });
        },
        resect() {
            // 地址
            (this.adi.belongName = null),
                // 类别
                (this.adi.name = null),
                // 条码
                (this.adi.code = null),
                // 联系人
                (this.adi.volume = null),
                // 名称
                (this.adi.weight = null),
                // 手机号码
                (this.adi.occupy = null);
        },
        // 删除
        Deldeli(index) {
            console.log(index);
            this.sId = index;
            del(this.sId).then((res) => {
                console.log(res);
                this.Rean();
            });
        },
        //   添加弹框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        dw() {
            this.dialogVisible = false;
        },
        //新增按钮
        addLists() {
            this.resect();
            this.dialogVisible = true;
            this.title = '添加仓库';
            this.conVar = 0;
        },
        //修改按钮
        update(k) {
            this.title = '修改仓库';
            this.conVar = 1;
            this.adi = k;
            this.dialogVisible = true;
        },
        //弹框提交
        conVarSum() {
            this.dialogVisible = false;
            if (this.conVar == 0) {
                // console.log("添加");
                Cadd(this.adi).then((res) => {
                    console.log(res);
                    this.Rean();
                    this.$message.success('添加成功');
                });
            } else {
                Cupt(this.adi).then((res) => {
                    console.log(res);
                    this.Rean();
                    this.$message.success('修改成功');
                });
            }
        },
        
        // 打印
        print(val) {
            this.Print = true;
            setTimeout(() => {
                JsBarcode('#barcode', val.code);
            }, 0);
        }
    },
    mounted() {
        this.Rean();
        this.rean();
    }
};
</script>

<style scoped>
.Head {
    height: 50px;
}
/* 客户类别 */
.Cusgory {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusgory span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 客户名称 */
.Cusname {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusname span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 搜素，重置按钮 */
.But {
    height: 100%;
    float: left;
}
.But button {
    margin-top: 10px;
}
#printMe {
    text-align: center;
}
</style>